<template>
  <div class="indexnew">
    <div class="indexnew_box" style="padding-bottom: 5px">
      <one :data="one"></one>
    </div>

    <div class="indexnew_box" style="border-radius: 5px">
      <two :data="two"></two>
    </div>
    <div class="indexnew_box" style="padding-bottom: 10px">
      <three
        :data="three"
        :three1="three1"
        :three2="three2"
        :three3="three3"
      ></three>
    </div>

    <div class="indexnew_box" style="width: 62%">
      <four :data="four" ref="four"></four>
    </div>
    <div class="indexnew_box" style="width: 37%">
      <five :data="five" ref="five"></five>
    </div>
    <div class="indexnew_box" style="padding-bottom: 5px">
      <six :data="six"></six>
    </div>
    <div class="indexnew_box">
      <seven :data="seven"></seven>
    </div>
    <div
      class="indexnew_box"
      style="border-radius: 5px; margin-bottom: 0"
      v-if="is_open.xnbkj && is_open.xnbkj.is_open != 0"
    >
      <eight :data="eight"></eight>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
import one from "@/components/index/components/one";
import two from "@/components/index/components/two";
import three from "@/components/index/components/three";
import four from "@/components/index/components/four";
import five from "@/components/index/components/five";
import six from "@/components/index/components/six";
import seven from "@/components/index/components/seven";
import eight from "@/components/index/components/eight";
export default {
  name: "index2",
  data() {
    return {
      one: {}, //mail 注册数据
      two: {}, //funds 资金
      three: [], //made 定制数据
      four: {}, //  order 订单走势
      five: {}, //  user 用户走势
      six: {}, //  check 审核数据
      seven: {},
      eight: {},
      coin: [], //区块链
      three1: {},
      three2: {},
      three3: {},
    };
  },
  components: {
    one,
    two,
    three,
    four,
    five,
    six,
    seven,
    eight,
  },
  computed: {
    ...mapState({
      is_open: (state) => state.plugin,
    }),
  },
  beforeDestroy() {
    this.$bus.$off("refresh");
  },
  created() {
    this.getData();
    this.$bus.$on("refresh", (type) => {
      this.refresh(type);
    });
  },

  //  check 审核数据
  //  amount 佣金排行
  //  team 团队排行
  //  product_ranking 商品销售排行
  //  statistics_ranking 供应商商品销售排行
  //  coin 区块链
  methods: {
    refresh(type) {
      this.$api.getIndex.refreshIndexNewV3({ types: type }).then((res) => {
        if (res.data.code == 200 && res.data.result != null) {
          this.$message({
            message: "更新成功",
            type: "success",
          });
          //  mail 注册数据
          this.one = res.data.result.mail;
          //  funds 资金
          this.two = res.data.result.funds;
          //  made 定制数据
          this.three = res.data.result.made;

          //  order 订单走势
          this.four.date = res.data.result.order.date;

          if (
            res.data.result.order.amount &&
            res.data.result.order.amount.length > 0
          ) {
            var all_count = [];
            var all_sum = [];
            var vip_count = [];
            var vip_sum = [];
            res.data.result.order.amount.forEach((item) => {
              all_count.push(item.all_count);
              all_sum.push(item.all_sum);
              vip_count.push(item.vip_count);
              vip_sum.push(item.vip_sum);
            });
            this.four.all_count = all_count;
            this.four.all_sum = all_sum;
            this.four.vip_count = vip_count;
            this.four.vip_sum = vip_sum;
            this.$refs.four.get_count();
          }

          //  user 用户走势
          this.five.date = res.data.result.user.date;

          this.$set(this.seven, "one", res.data.result.amount || []);
          this.$set(this.seven, "two", res.data.result.team || []);
          this.$set(this.seven, "three", res.data.result.product_ranking || []);
          this.$set(
            this.seven,
            "four",
            res.data.result.statistics_ranking || []
          );
          var all = [];
          var vip = [];
          "date" in res.data.result.user
            ? delete res.data.result.user["date"]
            : "";
          for (var attr in res.data.result.user) {
            console.log(attr);
            all.push(res.data.result.user[attr].all);
            vip.push(res.data.result.user[attr].vip);
          }
          this.five.all = all;
          this.five.vip = vip;
          this.$refs.five.get_count();

          //  check 审核数据
          this.six = res.data.result.check;

          //佣金收入排行 amount
          //市场团队排名 team
          //自营商品销售排行 product_ranking
          //供应商商品销售排行 statistics_ranking

          //区块链
          this.eight = res.data.result.coin;

          //1待审核事件
          this.three1 = res.data.result.pending;
          //2商户数据中心
          this.three2 = res.data.result.supplier;
          //3代理商数据中心
          this.three3 = res.data.result.agent;
        } else {
          this.$message.error(res.data.result);
        }
      });
    },
    getData() {
      this.$api.getIndex.getIndexNewV3({}).then((res) => {
        if (res.data.code == 200) {
          //  mail 注册数据
          this.one = res.data.result.mail;
          //  funds 资金
          this.two = res.data.result.funds;
          //  made 定制数据
          this.three = res.data.result.made;

          //  order 订单走势
          this.four.date = res.data.result.order.date;

          if (
            res.data.result.order.amount &&
            res.data.result.order.amount.length > 0
          ) {
            var all_count = [];
            var all_sum = [];
            var vip_count = [];
            var vip_sum = [];
            res.data.result.order.amount.forEach((item) => {
              all_count.push(item.all_count);
              all_sum.push(item.all_sum);
              vip_count.push(item.vip_count);
              vip_sum.push(item.vip_sum);
            });
            this.four.all_count = all_count;
            this.four.all_sum = all_sum;
            this.four.vip_count = vip_count;
            this.four.vip_sum = vip_sum;
            this.$refs.four.get_count();
          }

          //  user 用户走势
          this.five.date = res.data.result.user.date;

          this.$set(this.seven, "one", res.data.result.amount || []);
          this.$set(this.seven, "two", res.data.result.team || []);
          this.$set(this.seven, "three", res.data.result.product_ranking || []);
          this.$set(
            this.seven,
            "four",
            res.data.result.statistics_ranking || []
          );
          var all = [];
          var vip = [];
          "date" in res.data.result.user
            ? delete res.data.result.user["date"]
            : "";
          for (var attr in res.data.result.user) {
            console.log(attr);
            all.push(res.data.result.user[attr].all);
            vip.push(res.data.result.user[attr].vip);
          }
          this.five.all = all;
          this.five.vip = vip;
          this.$refs.five.get_count();

          //  check 审核数据
          this.six = res.data.result.check;

          //佣金收入排行 amount
          //市场团队排名 team
          //自营商品销售排行 product_ranking
          //供应商商品销售排行 statistics_ranking

          //区块链
          this.eight = res.data.result.coin;

          //1待审核事件
          this.three1 = res.data.result.pending;
          //2商户数据中心
          this.three2 = res.data.result.supplier;
          //3代理商数据中心
          this.three3 = res.data.result.agent;
        } else {
          this.$fnc.alertError(res.data.result);
        }
      });
    },
  },
};
</script>
<style lang="less" scoped>
.indexnew {
  width: 100%;
  height: 100%;
  background-color: #f5f7f9;
  overflow: auto;

  padding: 20px 20px 20px 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  color: #111111;

  .indexnew_box {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    padding-bottom: 25px;
  }
  .index_part {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 25px;
  }

  .indexhelp_box {
    height: auto !important;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    padding-bottom: 15px;
  }
}
</style>
